<template>
  <div>
    <Modal width="600px" v-model="conModel" :title="conModelTitle" footer-hide>
      <div class="max-div">
        <div v-for="(item,index) in uploadList" :key="index" style="margin-right: 10px;">
          <div class="demo-upload-list" v-viewer>
            <img :src="item" style="object-fit: cover;" />
            <div class="demo-upload-list-cover">
              <Icon style="margin-top: 35px;" type="ios-eye-outline" size="20" @click="handleView(item)"></Icon>
              <Icon style="margin-top: 35px;" type="ios-trash-outline" size="20" @click="handleRemove(item)"></Icon>
            </div>
          </div>
        </div>

        <Upload
          v-if="isShow"
          ref="upload"
          :headers="header"
          :show-upload-list="false"
          :on-success="handleSuccess"
          :accept="'.jpg , .jpeg , .png'"
          :before-upload="handleBeforeUpload"
          multiple
          type="drag"
          action="https://admin.xuncd.cn/adminapi/file/uploadReceiveImage"
          style="display: inline-block;width:58px;"
        >
          <div style="width: 58px;height:58px;line-height: 58px;">
            <Icon type="md-add" size="20"></Icon>
          </div>
        </Upload>
      </div>

      <div style="margin-top: 20px;">
        <Button @click="onSubmit" type="primary" style="width: 100%;">提交</Button>
      </div>

      <Modal width="700px" v-model="conModeltwo" footer-hide >
        <div style="display: flex;justify-content: center;width: 100%;">
          <img :src="url" width="500px" style="object-fit: cover;" height="500px">
        </div>
      </Modal>
    </Modal>
  </div>
</template>

<script>
import { getCookies } from '@/libs/util';
import { orederTake } from '@/api/order';

export default {
  data() {
    return {
      conModeltwo: false,
      conModel: false,
      conModelTitle: '',
      header: {},
      uploadList: [],
      isShow: true,
      id: '',
      url: ''
    };
  },

  mounted() {
    this.getToken();
  },

  methods: {
    handleSuccess(response, file) {
      if (response.status == 200) {
        this.uploadList.push(response.data.src);
      }
      this.isShow = this.uploadList.length == 5 ? false : true
    },

    handleView(item) {
      this.url = item
      this.conModeltwo = true;
    },

    handleRemove(item) {
      let index = this.uploadList.findIndex((i) => i == item);
      this.uploadList.splice(index, 1);
      this.isShow = this.uploadList.length == 5 ? false : true
    },

    handleBeforeUpload() {},

    title(val) {
      this.uploadList = []
      this.id = val.id;
      this.conModelTitle = '确认收货 订单号：' + val.order_id;
    },

    getToken() {
      this.header['Authori-zation'] = 'Bearer ' + getCookies('token');
    },

    onSubmit() {
      //receive_image参数为所有图片地址的数组：['https://xxx1.jpg','https://xxx2.jpg']
      if(this.uploadList.length < 1){
        this.$Message.error('最少上传一张图片');
        return
      }
      let list = this.uploadList.toString()
      orederTake(this.id,{
        receive_image : list
      }).then((res) => {
        if(res.status == 200){
          this.$Message.success(res.msg);
          this.conModel = false
          this.$emit('refresh')
        }
      })
    },

    cancel() {},
  },
};
</script>

<style scoped>
.max-div{
  display: flex;
  align-items: center;
  width: 600px;
  flex-wrap: wrap;
}

.demo-upload-list {
  display: inline-block;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 60px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  margin-right: 4px;
}
.demo-upload-list img {
  width: 100%;
  height: 100%;
}
.demo-upload-list-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
}
.demo-upload-list:hover .demo-upload-list-cover {
  display: block;
}
.demo-upload-list-cover i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 10px 2px;
}
</style>
